import React from 'react';
import {View} from 'react-native';

import api from '../../../common/api';
import ListItem from './item';
import List from '../../../components/list';
import Loading from '../../../components/loading';

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            member_type: props.member_type,
            type: props.type,
            list: [],
            page: 1,
            page_size: 20,
            isFetching: false,
            refreshing: false,
            hasMore: true
        };
    }

    //获取数据
    getData = isRefresh => {
        let {isFetching, page, page_size, member_type, type, list, hasMore, refreshing} = this.state;
        page = isRefresh ? 1 : page;
        const {setMemberNumber} = this.props;
        if (isFetching || !hasMore || refreshing) {
            return;
        }
        if (isRefresh) {
            this.setState({
                refreshing: true
            });
        } else {
            this.setState({
                isFetching: true
            });
        }
        api({
            url: 'api/member/getFansList',
            data: {
                page,
                page_size,
                member_type,
                type
            }
        })
            .then(data => {
                const {fansList, super_vip_number, douya_number} = data;
                this.setState({
                    list: isRefresh ? fansList : [...list, ...fansList],
                    page: page + 1,
                    hasMore: data.length >= page_size
                });
                setMemberNumber(super_vip_number, douya_number);
            })
            .catch(e => {
                this.props.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false
                });
            });
    };
    keyExtractor = item => {
        return item.id.toString();
    };
    //list item
    renderItem = ({item}) => (
        <ListItem item={item}/>
    );

    componentDidMount() {
        this.getData();
    }

    render() {
        const {list, hasMore, isFetching, refreshing} = this.state;
        return (
            <React.Fragment>
                <List
                    list={list}
                    numColumns={1}
                    isFetching={isFetching}
                    hasMore={hasMore}
                    refreshing={refreshing}
                    keyExtractor={this.keyExtractor}
                    endReachedFn={() => {
                        this.getData(false);
                    }}
                    refreshFn={() => {
                        this.getData(true);
                    }}
                    renderItem={this.renderItem}
                    ItemSeparatorComponent={() => <View style={{height: 1}}/>}
                />
                <Loading isLoading={list.length === 0 && isFetching}/>
            </React.Fragment>
        );
    }
}
